<template>
  <div class="main-page">
    <el-row>
      <el-text size="large" tag="b" style="margin-bottom: 20px; margin-top: 10px;">我的账户</el-text>
    </el-row>
    <el-row style="margin-bottom: 20px;">
      <el-col :span="19">
        <el-card style="width: 90%">
          <div style="display: inline-flex; align-items: center;">
            <div>
              <el-avatar style="width: 4rem; height: 4rem;">
                <el-icon :size="30"><User /></el-icon>
              </el-avatar>
            </div>
            <div style="padding-left: 20px; line-height: 2em;">
              <div>{{ userInfo.username }}</div>
              <div style="display: flex; align-items: center;">
                <span style="display: inline-block; width: 5em;">账户ID: </span>
                <span>{{ userInfo.userId }}</span>
              </div>
              <div style="display: inline-flex; align-items: center;">
                <span style="display: inline-block; width: 5em;">上次登录: </span>
                <span>{{ $utils.datetime.timestampInMillisToDateTime(userInfo.lastLogin) }}</span>
              </div>
            </div>
            <el-divider direction="vertical" style="min-height: 5em; margin-left: 10em; margin-right: 2em;"></el-divider>
            <div style="display: inline-flex; align-items: center;">
              <el-avatar style="background-color: rgb(121.3, 187.1, 255); width: 4rem; height: 4rem;">
                <el-icon :size="30" color="white"><WalletFilled /></el-icon>
              </el-avatar>
              <div style="margin-left: 20px; line-height: 2em;">
                <div>
                  账户余额: ¥
                  <span>{{ accountInfo.balance }}</span>
                </div>
                <div style="display: inline-flex; justify-content: space-around;">
                  <el-button type="primary" @click="goToAccountBalancePage">立即充值</el-button>
                  <el-button @click="goToAccountBalancePage">消费明细</el-button>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="30">
      <el-col :span="8">
        <statistic-card
          title="授权店铺总数"
          title-tooltip-text="截至北京时间今日1时，用户授权至系统的店铺总数。不包含授权至系统后又取消授权的店铺，数据统计时间可能会有偏差。"
          :value="'--'"
          change="0"
        ></statistic-card>
      </el-col>
      <el-col :span="8">
        <statistic-card
          title="昨日订单总量"
          title-tooltip-text="截至北京时间今日1时，用户授权至系统的店铺总数。不包含授权至系统后又取消授权的店铺，数据统计时间可能会有偏差。"
          :value="'--'"
          value-suffix-unit="单"
          change="7.83%"
          is-positive-change
        ></statistic-card>
      </el-col>
      <el-col :span="8">
        <statistic-card
          title="昨日订单总成交额"
          title-tooltip-text="截至北京时间今日1时，用户授权至系统的店铺总数。不包含授权至系统后又取消授权的店铺，数据统计时间可能会有偏差。"
          :value="'--'"
          value-suffix-unit="元"
          type="money"
          change="7.36%"
          is-positive-change
        ></statistic-card>
      </el-col>
    </el-row>
    <el-row style="margin-top: 30px;">
      <el-divider></el-divider>
    </el-row>
    <el-row style="margin-top: -10px; margin-bottom: 20px;">
      <el-text tag="b" size="large">今日待办</el-text>
    </el-row>
    <el-row :gutter="30">
      <el-col :span="8">
        <statistic-card
          title="未发货订单"
          :value="'--'"
          value-suffix-unit="单"
          clickable
        ></statistic-card>
      </el-col>
      <el-col :span="8">
        <statistic-card
          title="订单发货未录国内物流"
          :value="'--'"
          value-suffix-unit="单"
          clickable
        ></statistic-card>
      </el-col>
      <el-col :span="8">
        <statistic-card
          title="售后待处理"
          :value="'--'"
          value-suffix-unit="项"
          clickable
        ></statistic-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import StatisticCard from '@/views/main/components/StatisticCard.vue';
import userApi from '@/api/user';
import { onMounted, ref } from 'vue';
import { User, WalletFilled } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import { getAccountInfo } from '@/api/userMessage.js'


const accountInfo = ref({});

// 获取用户信息pinia实例
import { useUserStore } from '@/stores/modules/user.js'

const userStore = useUserStore()

const userInfo = userStore.userInfo;

const router = useRouter();

const goToAccountBalancePage = () => {
  router.push({ path: '/balanceManagement' });
};

onMounted(async () => {
  // 获取账户信息
  // todo：暂未获取成功
  const res = await getAccountInfo({
    accountId: userInfo.account.accountId,
    mainUsername: userInfo.account.mainUsername
  })
  console.log(res)

  // userApi.getAccountInfo({
  //   accountId: userInfo.value.accountId
  // }).then(res => {
  //   accountInfo.value = res;
  // }).catch(err => {
  //   console.error(err);
  //   ElMessage.warning('获取账户信息时发生错误，请刷新重试');
  // });
});
</script>


<style scoped>
.main-page {
  min-height: 100%;
}
.user-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
</style>
